<template>
	<veiw>
		<view class="left-capsule-nav"
			:style="'color:' +color+ ';background:'+background +';height:'+navHeight+'px;' + (isBorder ? 'border-bottom: 1rpx solid #F2F2F7;': '' )">
			<block v-if="isShow">
				<view v-if="type == 'home'" :style="'top:' + capsuleTop + 'px;height:' + cpheight + 'px;'"
					class="left-capsule-nav-content border-bt">
					<view class="back">
						<image src="/static/images/icon/Groupsu.png" mode="" class="Groupsu" @click="openPopup" />
					</view>
					<view class="line"></view>
					<view class="home">
						<image src="/static/images/icon/Groupmsg.png" mode="" class="Groupmsg" @click="goNotiy" />
					</view>
				</view>
				<view v-else-if="type == 'goTo'"
					:style="'top:' + capsuleTop + 'px; left:30rpx;height: ' + cpheight + 'px;background:' + background + ';width: 30rpx;'"
					class="left-capsule-nav-content">
					<view class="back">
						<u-icon name="arrow-left" :color="color" @click="returnPage" size="40"></u-icon>
					</view>
				</view>
			</block>
			<view v-if="title"
				:style="'text-align: center;position: fixed;top:' + capsuleTop + 'px;width: 100%;line-height:' + cpheight + 'px;'">
				{{title}}
			</view>
		</view>
		<view :style="'height:' + navHeight + 'px;'" v-if="showHeight"></view>
		<view :style="'height:' + capsuleTop + 'px;'" v-else></view>
	</veiw>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: '1123'
			},
			isBorder: {
				type: Boolean,
				default: false
			},
			isShow: {
				type: Boolean,
				default: true
			},
			showHeight: {
				type: Boolean,
				default: true
			},
			background: {
				type: String,
				default: '#fff'
			},
			color: {
				type: String,
				default: '#000'
			}
		},
		data() {
			return {
				navHeight: 0,
				capsuleTop: 0,
				city: '',
				cpheight: ''
			}
		},
		onLoad() {},
		onReady() {
			let dwObj = uni.getMenuButtonBoundingClientRect()
			console.log(dwObj)
			let navHeight_ = (dwObj.top + dwObj.height + 5)
			let capsuleTop_ = dwObj.top
			this.navHeight = navHeight_
			this.capsuleTop = capsuleTop_
			this.cpheight = dwObj.height
			this.dwObj = dwObj
		},
		methods: {
			// 回到首页
			goPage() {
				console.log(1);

				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			returnPage() {
				console.log(2);
				uni.navigateBack({
					delta: 1
				})
			},
			openPopup() {
				this.triggerEvent('open');
			},
			// 获取当前地理位置
			getLocal(latitude, longitude) {
				let vm = this;
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: function(res) {
						// console.log(JSON.stringify(res));
						console.log(res);
						let province = res.result.ad_info.province
						let city = res.result.ad_info.city
						vm.setData({
							province: province,
							city: city,
							latitude: latitude,
							longitude: longitude
						})
						wx.setStorageSync('city', city);
					},
					fail: function(res) {
						console.log(res);
					},
					complete: function(res) {
						// console.log(res);
					}
				});
			},
			goNotiy() {
				uni.navigateTo({
					url: '/pages/notify/notify'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 导航栏css开始*/
	.left-capsule {
		width: 100vh;
		height: 100vh;
		background-color: #fff;
	}

	.left-capsule-nav {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 3;
		background: #fff;
	}

	.left-capsule-nav-content {
		width: 85px;
		text-align: center;
		border-radius: 50px;
		position: relative;
		box-sizing: border-box;
		position: relative;
		left: 10px;
		z-index: 111;
		display: flex;
		align-items: center;
	}

	.left-capsule-nav-content view {
		display: inline;
		width: 35px;
		position: relative;
	}

	.left-capsule-nav-content .back {
		top: 6rpx;
		left: -20rpx;
	}

	.left-capsule-nav-content .home {
		top: 4rpx;
		left: 18rpx;
	}

	.left-capsule-nav-content .line {
		top: 15rpx;
		width: 1px;
		border-left: solid #cac3c3 thin;
		height: 17px;
		display: inline-block;
	}

	.border-bt {
		box-shadow: 0px 0px 1px 0.2px #999;
	}


	.home-top {
		display: inline-flex;
	}

	.addr {
		line-height: 60rpx;
		margin-left: 30rpx;
	}

	.home-logo {
		width: 113rpx;
		height: 49rpx;
		margin-left: 46rpx;
		vertical-align: middle;
	}

	.Groupsu {
		width: 36rpx;
		height: 28rpx;
		vertical-align: middle;
	}

	.Groupmsg {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}
</style>